<!DOCTYPE html>
<html>

<head>
  <meta charset='UTF-8'>
  <title>今日诗词</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link rel="stylesheet" href="./css/index.css">
</head>


<body>
  <div id="app">
    <!-- <div class="container-fluid"> -->
    <div class="container-fluid">
      <div class="row">
        <div class="box">
          <div class="zhezhao">
            <h1>{{res.data.content}}</h1>
            <h3>{{res.data.origin.dynasty}} · {{res.data.origin.author}}《{{res.data.origin.title}}》</h3>
          </div>
          <!-- <div class="row"> -->
          <!-- <h1>222222222222</h1>
          <h1>1233333333333</h1> -->
        </div>
        <!-- </div> -->
      </div>
    </div>

    <!-- <div class="row "> -->
    <div class="main ">
      <!-- <img src="https://picsum.photos/1920/600" alt=""> -->
      <div class="modal">

        <h1>{{res.data.content}}</h1>
        <h2>{{res.data.origin.dynasty}} · {{res.data.origin.author}}《{{res.data.origin.title}}》</h2>
      </div>



      <!-- </div> -->

      <!-- </div> -->
    </div>

    <div class="container">

      <section>
        <h2>全文</h2>
        <h3>{{res.data.origin.title}}</h3>
        <h4>{{res.data.origin.dynasty}} · {{res.data.origin.author}}</h4>
        <p v-for="item in res.data.origin.content">{{item}}</p>
      </section>

      <section>
        <h2>译文</h2>
        <p v-for="item in res.data.origin.translate">{{item}}</p>
      </section>

      <section>
        <h2>信息</h2>
        <p><b>状态：</b>{{res.status}}</p>
        <p><b>提示：：</b>{{res.warning}}</p>
        <p><b>ip：</b>{{res.ipAddress}}</p>
        <p><b>token：</b>{{res.token}}</p>
      </section>

    </div>





    <!-- 
    <p>一句诗词：{{res.data.content}}</p>
    <p>题目：{{res.data.origin.title}}</p>
    <p>朝代：{{res.data.origin.dynasty}}</p>
    <p>作者：{{res.data.origin.author}}</p>
    <p>原文：{{res.data.origin.content}}</p>
    <p>翻译：{{res.data.origin.translate}}</p>
    <p>状态：{{res.status}}</p>
    <p>提示：{{res.warning}}</p>
    <p>ip：{{res.ipAddress}}</p>
    <p>token：{{res.token}}</p> -->


  </div>

</body>
<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/axios@1.2.3/dist/axios.min.js"></script>


<script>

  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
  new Vue({
    el: '#app',

    data() {
      return {
        res: [],
      }
    },

    mounted() {
      const url = 'https://v2.jinrishici.com/one.json'

      fetch(url
        , {
          method: 'GET',
          headers: {
            // 'X-User-Token': 'Pw6w8JyfVfQk2JNdxkuTWn3H7heIeIaS',
            // 设置跨域请求的请求
            // 'X-Requested-With': 'XMLHttpRequest',
            // 'Accwss-Control-Allow-Headers': '*',
            // 'Accwss-Control-Allow-Origin': '*',
            // 'Content-Type': 'application/json',
            // 'Access-Control-Allow-Credentials': 'true'
          }
          // body: JSON.stringify({
          //   username: 'exampleUser',
          //   password: 'examplePassword'
          // })
        }
      )
        .then(response => response.json())
        .then(data => {
          // this.datas = data;
          // this.datas = data;
          console.log(data)
          this.res = data;

        }
        )
        .catch(error => console.error());




    },




  })
</script>



</html>